<!-- MenuItem.vue 侧边栏无限层级菜单-->
<template>
  <template v-for="item in menuList" :key="item.index">
    <!-- route-link 指向我们在index.js中配置的路由 -->
    <router-link :to="{ name: item.router }">
      <el-menu-item
        v-if="!item.children || item.children.length === 0"
        :index="item.index"
      >
        <el-icon v-if="item.icon"><component :is="item.icon" /></el-icon>
        <template #title>{{ item.label }}</template>
      </el-menu-item>
    

      <el-sub-menu v-else :index="item.index">
        <template #title>
          <el-icon v-if="item.icon"><component :is="item.icon" /></el-icon>
          <span>{{ item.label }}</span>
        </template>
        <!-- 递归调用自身 -->
        <menu-item :menu-list="item.children" />
      </el-sub-menu>

    </router-link>
  </template>
</template>

<script setup>
import { defineProps } from 'vue'

// 从父组件中接收 menuList 属性
// menuList 是一个数组，包含了所有的菜单项
// 每个菜单项可以是一个简单的菜单项（el-menu-item）或一个子菜单（el-sub-menu）
// 每个菜单项可以有一个图标（icon）和一个标签（label），
// 如果有子菜单，则有一个 children 数组来表示子菜单项
// 这里使用了 Vue 3 的组合式 API，使用 defineProps 来定义组件
// 这样可以在组件中直接使用 menuList 属性，而不需要在 props 中显式声明
defineProps({
  menuList: {
    type: Array,
    required: true
  }
})

</script>